<template>
	<!-- #ifdef APP -->
	<view :style="{'paddingTop':headerHeight}">
	<!-- #endif  -->
	<!-- #ifndef APP -->
	<view>
	<!-- #endif  -->
		<uni-nav-bar left-icon="left" @clickLeft="back" backgroundColor="#F5F7F8" title="发布" />
		<view class="box-content bg">
			<view class="push-content">
			 	<view class="item-push-info">
			 		<view class="push-item-title">
			 			添加视频
			 		</view>
					<view class="right-push-info imgs-video">
						<view class="" v-if="pushData.video">
							<video v-if="pushData.video" class="video-content" :src="pushData.video" controls></video>
							<view class="detele-img" @click="deleteImg(0)">删除</view>
						</view>
						<image class="add-img" @click="addVideo" :src="$util.imgurl('imgs/add.png')" mode=""></image>
					</view>
			 	</view>
				<view class="item-push-info">
					<view class="push-item-title">
						添加封面
					</view>
					<view class="right-push-info imgs-video">
						<view v-if="pushData.image">
							<image class="video-content"  :src="pushData.image" mode=""></image>
							<view class="detele-img" @click="deleteImg(1)">删除</view>
						</view>
						<image class="add-img" @click="addImage" :src="$util.imgurl('imgs/add.png')" mode=""></image>
					</view>
				</view>
				<view class="item-push-info">
					<view class="push-item-title">
						攻略分类
					</view>
					<view class="right-push-info">
						<!-- item-type-select -->
						<view class="select-list">
							<view  :class="item.select?'item-type item-type-select':'item-type'" @click="addCate(index)" style="margin-bottom: 21rpx;" v-for="(item,index) in category" :key="index">
								{{item.name}}
							</view>	
						</view>
						
					</view>
				</view>
				<view class="item-push-info">
					<view class="push-item-title">
						周边景点
					</view>
					<view class="right-push-info">
						<view class="select-list">
							<view :class="scenic.scenicId == item.scenicId?'item-type item-type-select':'item-type' " @click="scenic = item" style="margin-bottom: 21rpx;" v-for="(item,index) in scenicSpot" :key="index">
							  {{item.scenicName}}
							</view>	
						</view>
					</view>
				</view>
				<view class="item-push-info">
					<view class="push-item-title">
						当前位置
					</view>
					<view class="address">{{cityname}}</view>
					<view class="right-push-info" style="margin-left: auto;">
						<view class="reload-loaction" @click="openLoaction">
							<image class="address-icon" :src="$util.imgurl('imgs/address.png')" mode=""></image>
							<view>
								重新定位
							</view>
						</view>
						
					</view>
				</view>
				<view class="item-push-info">
					<view class="push-text">
						<textarea v-model="pushData.content" placeholder-class="textPlacestyle" name="" id="" cols="30" rows="10" placeholder="请输入"></textarea>
					</view>
				</view>
				<view class="push-btns">
					<button class="item-btn"><image class="btn-icon"  @click="push(1)"  :src="$util.imgurl('imgs/caogaoicon.png')" mode=""></image>存草稿</button>
					<button class="item-btn affirmbtn" @click="push(2)" :disabled="isDisabled"><image class="btn-icon caogaoadd" :src="$util.imgurl('imgs/caogaoadd.png')" mode=""></image>发布</button>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isDisabled :false,
				pushData:{
					image:"",
					video:"",
					content:"",
					provincial:"",
					city:"",
					area:"",
					address:"",
					lat:"",
					lng:"",
					// talk:"",
					category:"",
					id:"",
				},
				touttalk:[],
				category:[],
				cityname:"",
				scenicSpot:[],
				scenic:{}
			}
		},
		onLoad() {
			this.getCategory()
			this.getLocation()
		
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			chooseAddress(data){
				// console.log(data)
			},
			getLocation(){
				var that = this
				uni.getLocation({
					type: 'gcj02',
					altitude:true,
					geocode:true,
					success: function (res) {
						that.pushData.lat = res.latitude
						that.pushData.lng = res.longitude
						that.pushData.provincial = res.address.province
						that.pushData.city = res.address.city
						that.pushData.area = res.address.district
						that.pushData.address = res.address.poiName
						that.cityname = res.address.poiName
						that.getJin()
					}
				})
			},
			openLoaction(){
				var that = this
				uni.getLocation({
					type: 'gcj02',
					altitude:true,
					geocode:true,
					success: function (res) {
						uni.chooseLocation({
							latitude: res.latitude,
							longitude: res.longitude,
							keyword:"北京",
							success: function (result) {
								that.$util.transitionLocation(result.latitude,result.longitude,result.address,function(data){
									if(data.code == 0){
										that.cityname = result.name
										that.pushData.lat = result.latitude
										that.pushData.lng = result.longitude
										that.pushData.provincial = data.data.province
										that.pushData.city = data.data.city
										that.pushData.area = data.data.district
										that.pushData.address = result.name
										that.getJin()
									}
								})
							},
							fail(err) {
								// console.log(err);
							}
						});
					},
					fail(err) {
						// console.log(err)
					}
				});
			},
			getJin(){
				var obj = {
					distanceRange:3,
					sort:2,
					longitude: this.pushData.lng,
					latitude:this.pushData.lat
				}
				this.request.httpTokenRequest({
					url:"ticket/index",
					method:"GET"
				}, obj).then(res => {
					if(res.code == 0){
						this.scenicSpot = res.data.scenicList
					}
				}, error => {
				
				})
			},
			addCate(index){
				this.category[index].select = !this.category[index].select
			},
			pushCate(){
				var arr =[]
				this.category.map(item=>{
					if(item.select)arr.push(item.id)
				})
				this.pushData.category = arr.join(",")
			},
			getCategory(){ //分类
				let that = this
				this.request.httpTokenRequest({
					url: "tour/category",
					method: "get"
				}, {}).then(res => {
					if (res.code == 0) {
						for (var i = 0; i < res.data.length; i++) {
							res.data[i].select = false
							that.category.push(res.data[i])
						}
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			getTouttalk(){ //获取话题
				let that = this
				this.request.httpTokenRequest({
					url: "tour/getTourTalk",
					method: "get"
				}, {}).then(res => {
					if (res.code == 0) {
						that.touttalk = res.data
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			addVideo(){
				var that = this
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: function (res) {
						that.$util.upload('video',res.tempFilePath,function(data){
							that.pushData.video = data.data.url
						})
					},
					
				});
			},
			addImage(){
				var that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						that.$util.upload('picture',res.tempFilePaths[0],function(result){
							that.pushData.image = result.data.url
						})
					}
				});
				
			},
			deleteImg(index){
				if(index == 0){
					this.pushData.video = ""
				}else{
					this.pushData.image = ""
				}
			},
			vaire(){
				if(this.pushData.image == "" || this.pushData.image == null || this.pushData.image == undefined){
					this.$util.msg("请上传图片")
					this.isDisabled = false
					return false
				}else if(this.pushData.video == "" || this.pushData.video == null || this.pushData.video == undefined){
					this.$util.msg("请上传视频")
					this.isDisabled = false
					return false 
				}else if(this.pushData.content == "" || this.pushData.content == null || this.pushData.content == undefined){
					this.$util.msg("请填写描述内容")
					this.isDisabled = false
					return false
				}else if(this.pushData.category == "" || this.pushData.category == null || this.pushData.category == undefined){
					this.$util.msg("请选择分类")
					this.isDisabled = false
					return false
				}else if(this.pushData.provincial == "" || this.pushData.provincial == null || this.pushData.provincial == undefined){
					this.$util.msg("请选择位置")
					this.isDisabled = false
					return false
				}else if(this.pushData.lat == "" || this.pushData.lat == null || this.pushData.lat == undefined){
					this.$util.msg("请选择位置")
					this.isDisabled = false
					return false
				}
				return true
			},
			push(type){
				this.isDisabled = true
				this.pushCate()
				var statusData  = this.$util.hasEmptyValue(this.pushData)
				
				if(this.vaire()){
					this.request.httpTokenRequest({
						url: "tour/save",
						method: "post"
					}, {
						image: this.pushData.image,
						video:this.pushData.video,
						content:this.pushData.content,
						provincial:this.pushData.provincial,
						city:this.pushData.city,
						area:this.pushData.area,
						address:this.pushData.address,
						lat:this.pushData.lat,
						lng:this.pushData.lng,
						category:this.pushData.category,
						id:this.pushData.id,
						is_caogao:type,//1：是，2：否
						scenicId:this.scenic.scenicId?this.scenic.scenicId:'',
						scenicName:this.scenic.scenicName?this.scenic.scenicName:''
					}).then(res => {
						if (res.code == 0) {
							this.isDisabled = false
							this.$util.msg(res.msg)
							uni.switchTab({
								url:'/pages/mine/mine'
							})
						} else {
							this.isDisabled = false
							this.$util.msg(res.msg)
							return
						}
					
					}, error => {})
				}
				
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/css/travel.scss';
	.bg{
		background-color: #F5F7F8;
		min-height: 100vh;
	}
	.push-content{
		.item-push-info{
			margin-bottom: 30rpx;
			display: flex;
			align-items: flex-start;
			.push-item-title{
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #1E1E1E;
				flex: 0 0 auto;
				margin-right: 30rpx;
			}
			.address{
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #787878;
				flex: 0 0 auto;
				width: 400rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.imgs-video{
				display: flex;
				align-items: flex-start;
				.detele-img{
					text-align: center;
					font-size: 20rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #A0A0A0;
					margin: 10rpx 0;
				}
			}
			.right-push-info{
				flex: 0 1 auto;
				.video-content{
					width: 194rpx;
					height: 259rpx;
					border-radius: 10rpx;
					margin-right: 30rpx;
					
				}
				.add-img{
					width: 140rpx;
					height: 140rpx;
					
				}
				.select-list{
					display: flex;
					align-items: center;
					flex-wrap: wrap;
				}
				.reload-loaction{
					display: flex;
					align-items: center;
					view{
						font-size: 28rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #1E1E1E;
					}
					.address-icon{
						width: 19rpx;
						height: 28rpx;
						margin-right: 10rpx;
					}
				}
			}
			.push-text{
				background-color: #EDEDED;
				width: 100%;
				height: 208rpx;
				border-radius: 10rpx;
				padding: 22rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #1E1E1E;
			}
			.textPlacestyle{
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #787878;
			}
		}
		.push-btns{
			display: flex;
			align-items: center;
			button{
				border: 0;
				background-color: rgba(0, 0, 0, 0);
				padding: 0;
			}
			button::after{
				border: 0;
			}
			.item-btn{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 335rpx;
				height: 80rpx;
				background: #C4C4C4;
				border-radius: 10rpx;
				border: 0;
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #1E1E1E;
				.btn-icon{
					width: 38rpx;
					height: 30rpx;
					margin-right: 16rpx;
				}
				.caogaoadd{
					width: 30rpx;
					height: 30rpx;
				}
			}
			.affirmbtn{
				background-color: #EF5233;
				color: #fff;
			}
			
		}
	}

</style>